<template>
  <div class="app-container home">
    <el-container>
      <el-header>
        <el-card style="margin-top: -8px">
          <div style="font-size: 21px;font-weight: bolder;">
            非金属夹杂物成分转换
          </div>
        </el-card>
      </el-header>
      <el-container>
        <el-aside width="180px" style="margin-top: 15px;height: 400px" align="center">
          <div style="margin-top: 15px">
            <el-upload class="upload" action="" :auto-upload="false" :show-file-list="false" :multiple="false" :on-change="(file, fileList) => importTemp(file, fileList)">
              <el-button type="primary"   class="flex" >导入数据</el-button>
            </el-upload>
          </div>
          <div style="margin-top: 15px">
            <el-button type="primary" >输入数据</el-button>
          </div>
        </el-aside>
        <el-main>
          <el-table
            @cell-click="tableDataClick"
            :data="tableData"
            style="width: 100%"
            height="350px"
            border
            highlight-current-row
            align="center"
          >
            <el-table-column
              align="center"
              prop="index"
              label="夹杂物序号"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Ca"
              label="Ca">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Ce"
              label="Ce">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Mg"
              label="Mg">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Al"
              label="Al">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Ti"
              label="Ti">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Li"
              label="Li">
            </el-table-column>
            <el-table-column
              align="center"
              prop="B"
              label="B">
            </el-table-column>
            <el-table-column
              align="center"
              prop="V"
              label="V">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Mn"
              label="Mn">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Nb"
              label="Nb">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Cr"
              label="Cr">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Fe"
              label="Fe">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Na"
              label="Na">
            </el-table-column>
            <el-table-column
              align="center"
              prop="K"
              label="K">
            </el-table-column>
            <el-table-column
              align="center"
              prop="C"
              label="C">
            </el-table-column>
            <el-table-column
              align="center"
              prop="N"
              label="N">
            </el-table-column>
            <el-table-column
              align="center"
              prop="O"
              label="O">
            </el-table-column>
            <el-table-column
              align="center"
              prop="F"
              label="F">
            </el-table-column>
            <el-table-column
              align="center"
              prop="S"
              label="S">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Cl"
              label="Cl">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <el-container>
        <el-aside width="180px" style="margin-top: 10px;height: 350px" align="center">
          <div style="margin-top: 15px">
            <el-button type="primary" @click="converter">成分转换</el-button>
          </div>
          <div style="margin-top: 15px">
            <el-button type="primary">保存数据</el-button>
          </div>
        </el-aside>
        <el-main>
          <el-table
            :data="tableData1"
            style="width: 100%"
            height="330px"
            align="center"
          >
<!--            <el-table-column-->
<!--              align="center"-->
<!--              prop="fileName"-->
<!--              hidden="hidden"-->
<!--              label="文件夹名"-->
<!--              width="150">-->
<!--            </el-table-column>-->
            <el-table-column
              align="center"
              prop="index"
              label="夹杂物序号"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="CaF2"
              label="CaF2"
              width="90">
            </el-table-column>
            <el-table-column
              align="center"
              prop="CaO"
              label="CaO"
              width="90">
            </el-table-column>
            <el-table-column
              align="center"
              prop="CeO"
              label="CeO"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="MgO"
              label="MgO"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Al2O3"
              label="Al2O3"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Ti2O3"
              label="Ti2O3"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Li2O"
              label="Li2O"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="SiO2"
              label="SiO2"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="B2O3"
              label="B2O3"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="V2O3"
              label="V2O3"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="MnO"
              label="MnO"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="NbO2"
              label="NbO2"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Cr2O3"
              label="Cr2O3"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="FeO"
              label="FeO"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="Na2O"
              label="Na2O"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="K2O"
              label="K2O"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="TiN"
              label="TiN"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="AIN"
              label="AIN"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="CeS"
              label="CeS"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="TiS"
              label="TiS"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              prop="MnS"
              label="MnS"
              width="100">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>

    <el-container>
      <el-header>
        <el-card>
          <div style="font-size: 21px;font-weight: bolder;">
            非金属夹杂物来源判断
          </div>
        </el-card>
      </el-header>
      <el-container>
        <el-aside width="180px" style="height: 350px;margin-top: 10px" align="center">
          <div style="margin-top: 15px">
            <el-button type="primary" @click="jzSource">夹杂物来源</el-button>
          </div>
          <div style="margin-top: 15px">
            <el-button type="primary" >建议解决方案</el-button>
          </div>
        </el-aside>
        <el-main>
          <el-card>
            <div ref="chart" style="width: 100% ;height: 300px ">

            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as xlsx from 'xlsx';
import * as echarts from 'echarts';
import * as XLSX from "xlsx";
import axios from "axios";
import service from "@/utils/request";
export default {
  name: "Index",
  mounted(){
    this.initChart();
  },
  data() {
    return {
      // 版本号
      version: "3.8.8",
      tabPosition: 'left',
      tableData:[],
      tableData1:[],
      currentItem:{},
      echartsData:[]
    };
  },
  methods: {
    //某行被点击
    tableDataClick(row){
      this.currentItem = row;
      console.log(this.currentItem)
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    updateChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: '夹杂物组成分布'
        },
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: ["CaF2","CaO","CeO","MgO","Al2O3","Ti2O3","Li2O","TiO2","SiO2","B2O3","V2O3","MnO","NbO2","Cr2O3","FeO","Na2O","K2O","TiN","AIN","CeS","TiS","MnS"]
        },
        yAxis: {
          name: '百分比'
        },
        series: [{
          type: 'bar',
          data: this.echartsData
        }]
      };
      chart.setOption(option);
    },

    //转换方法
    converter(){
      if(Object.keys(this.currentItem).length !== 0){
        service.post('converter',this.currentItem).then(res=>{
          var list = [];
          list.push(res.converted_row)
          this.tableData1 = list;
          console.log(res);

          this.$message.success("转换成功！")
        })
      }else{
        if(this.tableData.length===0){
          this.$message.warning("请先导入数据！")
        }else{
          this.$message.warning("请在导入数据的表格中选择一行进行成分转换！")
        }
      }



    },
    jzSource(){
      var item = this.tableData1[0]
      //业务逻辑
      this.echartsData = []
      this.echartsData.push(item.CaF2===null?0:item.CaF2)
      this.echartsData.push(item.CaO===null?0:item.CaO)
      this.echartsData.push(item.CeO===null?0:item.CeO)
      this.echartsData.push(item.MgO===null?0:item.MgO)
      this.echartsData.push(item.Al2O3===null?0:item.Al2O3)
      this.echartsData.push(item.Ti2O3===null?0:item.Ti2O3)
      this.echartsData.push(item.Li2O===null?0:item.Li2O)
      this.echartsData.push(item.TiO2===null?0:item.TiO2)
      this.echartsData.push(item.SiO2===null?0:item.SiO2)
      this.echartsData.push(item.B2O3===null?0:item.B2O3)
      this.echartsData.push(item.V2O3===null?0:item.V2O3)
      this.echartsData.push(item.MnO===null?0:item.MnO)
      this.echartsData.push(item.NbO2===null?0:item.NbO2)
      this.echartsData.push(item.Cr2O3===null?0:item.Cr2O3)
      this.echartsData.push(item.FeO===null?0:item.FeO)
      this.echartsData.push(item.Na2O===null?0:item.Na2O)
      this.echartsData.push(item.K2O===null?0:item.K2O)
      this.echartsData.push(item.TiN===null?0:item.TiN)
      this.echartsData.push(item.AIN===null?0:item.AIN)
      this.echartsData.push(item.Ces===null?0:item.Ces)
      this.echartsData.push(item.TiS===null?0:item.TiS)
      this.echartsData.push(item.MnS===null?0:item.MnS)
      this.updateChart();
      console.log(this.echartsData)
    },
    importTemp(file,fileList){
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const sheet = Object.keys(workbook.Sheets)[0] // 我是用的是第二个
          const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]) //
          const worksheet = workbook.Sheets[sheet]
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
          if (!jsonData.length) return
          const headers = jsonData[0]
          if (!headers.length) return;
          jsonData.shift();
          console.log(jsonData);
          jsonData.forEach(item => {
            var tableItem = {
              index:'',
              Ca:'',
              Ce:'',
              Mg:'',
              Al:'',
              Ti:'',
              Li:'',
              B:'',
              V:'',
              Mn:'',
              Nb:'',
              Cr:'',
              Fe:'',
              Na:'',
              K:'',
              C:'',
              N:'',
              O:'',
              F:'',
              S:'',
              Cl:''
            }
            tableItem.index = item[0];
            tableItem.Ca = item[1];
            tableItem.Ce = item[2];
            tableItem.Mg = item[3];
            tableItem.Al = item[4];
            tableItem.Ti = item[5];
            tableItem.Li = item[6];
            tableItem.B = item[7];
            tableItem.V = item[8];
            tableItem.Mn = item[9];
            tableItem.Nb = item[10];
            tableItem.Cr = item[11];
            tableItem.Fe = item[12];
            tableItem.Na = item[13];
            tableItem.K = item[14];
            tableItem.C = item[15];
            tableItem.N = item[16];
            tableItem.O = item[17];
            tableItem.F = item[18];
            tableItem.S = item[19];
            tableItem.Cl = item[20];
            this.tableData.push(tableItem)
          })

        } catch (e) {
          console.log(e, 'error')
        }
      }
      fileReader.readAsBinaryString(file.raw);
    },

    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: '夹杂物组成分布'
        },
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: ["CaF2","CaO","CeO","MgO","Al2O3","Ti2O3","Li2O","TiO2","SiO2","B2O3","V2O3","MnO","NbO2","Cr2O3","FeO","Na2O","K2O","TiN","AIN","CeS","TiS","MnS"]
        },
        yAxis: {
          name: '百分比'
        },
        series: [{
          type: 'bar',
          data: this.echartsData
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.bar-chart {
  margin: 20px;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

